<template>
    <cl-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        @submit.prevent
        label-position="right"
    >
        <cl-form-item label="名称" prop="name">
            <cl-input v-model="ruleForm.name"></cl-input>
        </cl-form-item>
        <cl-form-item label="密码" prop="password">
            <cl-input v-model="ruleForm.password"></cl-input>
        </cl-form-item>
        <cl-form-item label="日期">
            <cl-input v-model="ruleForm.date"></cl-input>
        </cl-form-item>
        <cl-form-item>
            <cl-button type="primary" @click="submitForm(ruleFormRef)">确定</cl-button>&nbsp;&nbsp;&nbsp;
            <cl-button @click="resetForm(ruleFormRef)">重置</cl-button>
        </cl-form-item>
    </cl-form>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
    setup() {
        const formSize = ref('')
        const ruleFormRef = ref(null)
        const ruleForm = reactive({
            name: '',
            password: '',
            date:''
        })
        const rules = reactive({
            name: [
                {
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur',
                }
            ],
            password: [
                {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur',
                }
            ],
        })
        const submitForm = (formEl) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    console.log('submit!')
                } else {
                    console.log('error submit!')
                    return false
                }
            })
        }

        const resetForm = (formEl) => {
            if (!formEl) return
            formEl.resetFields()
        }

        return {
            formSize,
            ruleForm,
            rules,
            ruleFormRef,
            submitForm,
            resetForm
        }
    },
})
</script>
